<!--
 * @Description:input全选和反选.html
 * @Author: Sun
 * @Date: 2019-07-01 20:05:50
 * @LastEditors: Sun
 * @LastEditTime: 2019-07-14 10:57:58
 -->
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>input全选和反选</title>
	<script>
		window.onload = function () {
			var btns = document.getElementsByTagName("button")
			var inputs = document.getElementById("button").getElementsByTagName("input");
			var lis = document.getElementById("button").getElementsByTagName("li");
			var td = document.getElementById("button").getElementsByTagName("label");
			console.log("lis", lis.length)


			for (let index = 0; index < lis.length; index++) {
				const element = lis[index];

				element.onclick = function () {
					console.log("oooo")
					// inputs[index].checked&&(inputs[index].checked = false)&&(td[index].className = "")
					// !inputs[index].checked&&(inputs[index].checked = true)&&(td[index].className = "")

					if (inputs[index].checked) {
						inputs[index].checked = false
						td[index].className = ""
					} else {
						inputs[index].checked = true
						td[index].className = "cd"
					}
				}
			}

			btns[0].onclick = function () {
				all(true)
			}
			btns[1].onclick = function () {
				all(false)
			}
			btns[2].onclick = function () {
				for (let index = 0; index < inputs.length; index++) {
					const element = inputs[index];
					if (element.checked) {
						element.checked = false;
						td[index].className = ""
					} else {
						element.checked = true;
						td[index].className = "cd"
					}

				}
			}

			function all(falg) {
				for (let index = 0; index < inputs.length; index++) {
					inputs[index].checked = falg
					falg ? td[index].className = "cd" : td[index].className = ""
				}
			}



		}
	</script>
</head>

<body>
	<style>
		ul>li {
			position: relative
		}

		ul>li input {
			position: absolute;
			clip: rect(0 0 0 0);
		}

		ul>li label.cd {
			background: url("img/c-selected.png") no-repeat center center;
			background-size: cover;
		}

		ul>li>label {
			position: relative;
			display: inline-block;
			/* display: flex */
			width: 16px;
			height: 16px;
			background: url("img/c-noselect.png") no-repeat center center;
			background-size: cover;
		}
	</style>
	<div>
		<div id="top">
			<button>全选</button>
			<button>取消</button>
			<button>反选</button>
		</div>
		<div id="button">
			<ul>
				<li>选项: <label> <input type="checkbox"></li></label>
				<li>选项: <label> <input type="checkbox"></li></label>
				<li>选项: <label> <input type="checkbox"></li></label>
				<li>选项: <label> <input type="checkbox"></li></label>
				<li>选项: <label> <input type="checkbox"></li></label>
				<li>选项: <label> <input type="checkbox"></li></label>
				<li>选项: <label> <input type="checkbox"></li></label>
				<li>选项: <label> <input type="checkbox"></li></label>
				<li>选项: <label> <input type="checkbox"></li></label>
				<li>选项: <label> <input type="checkbox"></li></label>
				<li>选项: <label> <input type="checkbox"></li></label>
				<li>选项: <label> <input type="checkbox"></li></label>

			</ul>
		</div>
	</div>
</body>

</html>